<template>
  <div>
    <!-- 搜索栏区域 -->
    <el-card class="SearchCard" body-style="padding:0px">
      <el-row>
        <el-col :span="2">
          <div class="SearchTitle">条件搜索栏</div>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">搜索关键字</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-input placeholder="请输入内容" v-model="queryInfo.srm" clearable @clear="clearEvent"></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button size="medium" type="primary" @click="getSearchList()">搜索</el-button>
          </div>
        </el-col>

        <el-col :span="2" style="margin-left:12px;">
          <div class="SearchLable">
            <el-button size="medium" type="primary" @click="addRepeatedDrugDia()">添加新重复用药组</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="TableCard" :body-style="{ padding: '0px' }">
      <div>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ 'text-align':'center',background: '#3F9DFD', color: '#FFF' }"
          :cell-style="{'text-align':'center'}"
          size="medium"
          stripe
          style="width: 100%;font-size:12px"
          :height="tableHeight"
          ref="table"
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="showAddRule(scope.row.dupcId)">新增</el-button>
              <el-button type="text" @click="open(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="allerName" label="药品名称"></el-table-column>
          <el-table-column prop="dupcName" label="重复用药类型"></el-table-column>
          <el-table-column prop="routeType" label="给药类型" width="220">
            <template
              slot-scope="scope"
            >{{(scope.row.routeType==1)?"全身给药":(scope.row.routeType==2)?"局部给药":(scope.row.routeType==3)?"所有方式给药":(scope.row.routeType==0)?"系统默认":""}}</template>
          </el-table-column>
          <el-table-column prop="duplicateMax" label="容限"></el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
          background
        ></el-pagination>
      </div>
    </el-card>
    <!-- 新增重复用药组 -->
    <el-dialog
      title="新增重复用药组"
      :visible.sync="addRuleGroupVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="addRuleAdverse">
        <el-form
          :inline="true"
          :model="addRuleGroupData"
          class="demo-form-inline addForm"
          label-width="150px"
          :rules="Formrules"
          ref="addRuleGroupData"
        >
          <el-form-item label="重复用药组名称">
            <el-input v-model="addRuleGroupData.dupcName" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="给药途径ID">
            <el-input v-model="addRuleGroupData.routeName" size="medium">
              <el-button slot="append" @click="showRoute()">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="最大容量" prop="duplicateMax">
            <el-input v-model.number="addRuleGroupData.duplicateMax" size="medium"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRuleGroup()">新 增</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 新增重复用药规则 -->
    <el-dialog
      title="新增重复用药规则"
      :visible.sync="addRuleVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="addRuleAdverse">
        <el-form :inline="true" :model="addRuleData" class="demo-form-inline" label-width="150px">
          <el-form-item label="成分名称">
            <el-input v-model="addRuleData.allerName" size="medium">
              <el-button slot="append" @click="showRepeat()">选择</el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRule()">新 增</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 获取Route -->
    <el-dialog
      title="选择给药途径"
      :visible.sync="RouteVisible"
      class="editDialog"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width:100%;height:527px">
        <div class="addInput">
          <el-input v-model="routeData.srm" size="small" placeholder="请输入内容"></el-input>
          <el-button style="margin-right:8px" type="primary" size="small" @click="SearchRoute()">搜索</el-button>
        </div>
        <el-table
          :data="routeData.tableData"
          stripe
          border
          height="400"
          style="width: 100%;font-size: 10px"
          :header-cell-style="{'text-align':'center'}"
          :row-style="{height:'40px'}"
          :cell-style="{'text-align':'center',padding:'0px'}"
          @row-click="handleRow"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label width="35">
            <template slot-scope="scope">
              <el-radio
                :label="scope.row"
                v-model="routeData.radioId"
                @change.native="handleSelectionChange(scope.row)"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>

          <el-table-column prop="routeId" width="150" label="给药途径编码"></el-table-column>
          <el-table-column prop="routeName" label="给药途径名称"></el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
        <div class="dialogBlock">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :page-size="50"
            layout="total, prev, pager, next"
            :total="routeData.total"
          ></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <div class="SortFoot">
            <el-button
              style="margin-right:8px"
              type="primary"
              size="small"
              @click="SelectRoute()"
            >确定</el-button>
            <el-button style="margin-right:8px" @click="RouteVisible = false" size="small">取消</el-button>
          </div>
        </span>
      </div>
    </el-dialog>
    <!-- 获取Repeat -->
    <el-dialog
      title="选择成分信息"
      :visible.sync="RepeatVisible"
      class="editDialog"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width:100%;height:527px">
        <div class="addInput">
          <el-input v-model="RepeatData.srm" size="small" placeholder="请输入内容"></el-input>
          <el-button style="margin-right:8px" type="primary" size="small" @click="SearchRepeat()">搜索</el-button>
        </div>
        <el-table
          :data="RepeatData.tableData"
          stripe
          border
          height="400"
          style="width: 100%;font-size: 10px"
          :header-cell-style="{'text-align':'center'}"
          :row-style="{height:'40px'}"
          :cell-style="{'text-align':'center',padding:'0px'}"
        >
          <el-table-column label width="35">
            <template slot-scope="scope">
              <el-radio :label="scope.row" v-model="RepeatData.radioId">&nbsp;</el-radio>
            </template>
          </el-table-column>

          <el-table-column prop="id" width="150" label="成分ID"></el-table-column>
          <el-table-column prop="allerName" label="成分名称名称"></el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
        <div class="dialogBlock">
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :page-size="RepeatData.pageSize"
            layout="total, prev, pager, next"
            :total="RepeatData.total"
          ></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <div class="SortFoot">
            <el-button
              style="margin-right:8px"
              type="primary"
              size="small"
              @click="SelectRepeat()"
            >确定</el-button>
            <el-button style="margin-right:8px" @click="RouteVisible = false" size="small">取消</el-button>
          </div>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRuleListRepea,
  addRuleInfoRepea,
  showRuleAllRepea,
  deleteRuleRepea,
} from "@/api/rad";
export default {
  data() {
    var checkduplicateMax = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("最大容量不能为空"));
      }

      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (value < 0) {
          callback(new Error("最大容量必须大于0"));
        } else {
          callback();
        }
      }
    };
    return {
      tableHeight: 250,
      multipleSelection: {},
      queryInfo: {
        srm: "",
        page: 1,
        pageSize: 20,
      },
      total: 0,
      tableData: [],
      addRuleGroupVisible: false,
      addRuleGroupData: {
        dupcName: "",
        routeType: "",
        routeName: "",
        duplicateMax: "",
      },
      RouteVisible: false,
      routeData: {
        srm: "",
        page: 1,
        pageSize: 20,
        load: 0,
        total: 0,
        tableData: [],
        radioId: [],
      },
      RepeatData: {
        srm: "",
        page: 1,
        pageSize: 20,
        total: 0,
        tableData: [],
        radioId: [],
      },
      addRuleVisible: false,
      addRuleData: {
        allerName: "",
        dupcId: "",
      },
      RepeatVisible: false,
      Formrules: {
        duplicateMax: [{ validator: checkduplicateMax, trigger: "blur" }],
      },
    };
  },
  mounted: function () {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 50;
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 50;
      };
    });
  },
  created: function () {
    this.getRuleListRepea();
  },
  methods: {
    handleClose(done) {
      done();
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getRuleListRepea();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getRuleListRepea();
    },
    handleSizeChange1(newSize) {
      this.routeData.pageSize = newSize;
      this.getRouteJson();
    },
    handleCurrentChange1(newPage) {
      this.routeData.page = newPage;
      this.getRouteJson();
    },
    handleSizeChange2(newSize) {
      this.RepeatData.pageSize = newSize;
      this.getRepeatJson();
    },
    handleCurrentChange2(newPage) {
      this.RepeatData.page = newPage;
      this.getRepeatJson();
    },
    async getRuleListRepea() {
      let res = await this.$rad.getRuleListRepea({
        srm: this.queryInfo.srm,
        page: this.queryInfo.page,
        pageSize: this.queryInfo.pageSize,
      });
      (this.tableData = res.rows), (this.total = res.total);
      console.log(res.rows);
    },
    getSearchList() {
      this.queryInfo.page = 1;
      this.getRuleListRepea();
    },
    clearEvent() {},
    addRepeatedDrugDia() {
      this.addRuleGroupVisible = true;
    },
    showRoute() {
      this.RouteVisible = true;
      this.getRouteJson();
    },
    showRepeat() {
      this.RepeatVisible = true;
      this.getRepeatJson();
    },
    async getRepeatJson() {
      let res = await this.$rad.getRepeatJson({
        srm: this.RepeatData.srm,
        page: this.RepeatData.page,
        pageSize: this.RepeatData.pageSize,
      });
      console.log(res);
      this.RepeatData.tableData = res.rows;
      this.RepeatData.total = res.total;
    },
    async getRouteJson() {
      let res = await this.$rad.getRouteJson({
        srm: this.routeData.srm,
        page: this.routeData.page,
        pageSize: this.routeData.pageSize,
      });
      console.log(res);
      this.routeData.tableData = res.rows;
      this.routeData.total = res.total;
    },
    SelectRoute() {
      this.addRuleGroupData.routeName = this.routeData.radioId.routeName;
      this.addRuleGroupData.routeType = this.routeData.radioId.routeId;
      this.RouteVisible = false;
    },
    SelectRepeat() {
      this.addRuleData.allerName = this.RepeatData.radioId.allerName;
      this.RepeatVisible = false;
    },
    async addRuleGroup() {
      let res = await this.$rad.addRuleRepeatedGroup({
        dupcName: this.addRuleGroupData.dupcName,
        routeType: this.addRuleGroupData.routeType,
        duplicateMax: this.addRuleGroupData.duplicateMax,
      });
      if (res.code == 1) {
        this.addRuleGroupVisible = false;
        this.getRuleListRepea();
        this.clearAddRuleData();
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        return this.$message({
          type: "success",
          message: res.msg,
        });
      }
    },
    clearAddRuleData() {
      this.addRuleGroupData.dupcName = "";
      this.addRuleGroupData.routeType = "";
      this.addRuleGroupData.duplicateMax = "";
    },
    showAddRule(dupcId) {
      this.addRuleData.dupcId = dupcId;
      this.addRuleVisible = true;
    },
    async addRule() {
      let res = await this.$rad.addRuleInfoRepea({
        allerName: this.addRuleData.allerName,
        dupcId: this.addRuleData.dupcId,
      });
      console.log(res);
      if (res.code == 1) {
        this.addRuleVisible = false;
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        return this.$message({
          type: "success",
          message: res.msg,
        });
      }
    },
    open(id) {
      this.$confirm("此操作将永久删除该规则, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteRuleRepea(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async deleteRuleRepea(id) {
      let res = await this.$rad.deleteRuleRepea({
        id: id,
      });
      console.log(res);
      if (res.code == 1) {
        this.getRuleListRepea();
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        return this.$message({
          type: "success",
          message: res.msg,
        });
      }
    },
    handleRow(row) {
      console.log(row);
      this.routeData.radioId = row;
      this.multipleSelection = row;
    },
    handleSelectionChange(val) {
      console.log(res);
      this.multipleSelection = val;
    },
    SearchRepeat() {
      this.getRepeatJson();
    },
    SearchRoute() {
      this.routeData.page = 1;
      this.getRouteJson();
    },
  },
};
</script>
<style scoped>
.SearchCard {
  height: 50px;
  font-size: 12px;
}
.SearchTitle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #c2c2c2;
}
.SearchLable {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.TableCard {
  margin-left: 3px;
  margin-top: 2px;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.editDialog >>> .el-dialog__header {
  margin-bottom: 0px;
}
.editDialog >>> .el-dialog__body {
  padding-left: 0px;
  padding-right: 0px;
}
.addInput {
  height: 45px;
  display: flex;
  align-items: center;
}
.SortFoot {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.addInput >>> .el-input {
  width: 40%;
  margin-left: 8px;
}
.addInput >>> .el-button {
  margin-left: 8px;
}
.dialogBlock {
  margin-top: 0px;
  margin-bottom: 0px;
}
.addForm >>> .el-form-item__content {
  width: 200px;
}
</style>